<div class="template-list" ng-controller="TemplateListController as templateList">
    <div class="add-btn">
        <button class="btn btn-primary"
                ng-click="templateList.onAddClick()"
                ng-if="admin"

        >
            Add Template
        </button>

        <button class="btn btn-primary fa fa-refresh"
                ng-click="templateList.refreshTemplates()"
                ngf-max-height="1000"
                data-toggle="tooltip"
                title="Refresh template list"
        >
        </button>

        <div class="themable-checkbox btn" style="float: right">
            <input type="checkbox" ng-model="templateList.checkboxAutoRefresh" id="themable-checkbox"
                   ng-change="alarmList.autoRefreshChanged()">
            <label for="themable-checkbox" translate>Auto Refresh</label>
        </div>

    </div>

    <div class="panel panel-default">

        <table st-table='templateList.itemplates' st-safe-src="templateList.templates"
               class="table-striped table-rsp table-detail modern"
               hz-table>
            <thead>
            <tr>
                <th st-sort="name" style="padding-left: 15px;">{$ 'Name' | translate $}</th>
                <th st-sort="status">{$ 'Status' | translate $}</th>
                <th st-sort="type">{$ 'Type' | translate $}</th>
                <th st-sort="details">{$ 'Details' | translate $}</th>
                <th st-sort="timestamp">{$ 'Timestamp' | translate $}</th>
                <th>{$ 'Show' | translate $}</th>
                <th ng-if="admin">{$ 'Delete' | translate $}</th>
            </tr>
            <tr>
                <th colspan="5">
                    <hz-search-bar group-classes="input-group-sm"
                                   icon-classes="fa-search">
                    </hz-search-bar>
                </th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="template in templateList.itemplates track by $index">
                <td style="padding-left: 15px;">{$template.name$}</td>
                <td>{$template.status$}</td>
                <td>{$template.type$}</td>
                <td>{$template["status details"]$}</td>
                <td><i class="fa fa-clock-o"></i> {$template.date |
                    vitrageDate:templateList.dateFormat:templateList.timezone$}
                </td>
                <td ng-click="templateList.onShowClick(template)"><i class="fa fa-list"></i></td>
                <td ng-if="admin" ng-click="templateList.onDeleteClick(template)"><i class="fa fa-trash"></i></td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
